<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <!-- 中间地图 -->
  <div class="middle_box">
    <!-- <div class="TimeDisplay">
        <TimeDisplay></TimeDisplay>
      </div> -->
    <div id="mapDom" class="map"></div>
    <div class="date">
      <div class="Quantity">
        <Quantity></Quantity>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";
import * as echarts from "echarts";
import "../assets/china";
import { getCityPositionByName } from "../assets/cityPostion";
import TimeDisplay from "./Middle/currentTime.vue";
import Quantity from "./Middle/Quantity.vue";
import "echarts-gl"; //3D地图插件


let mockData: any[] = [
  { name: "山东" },
  { name: "江西" },
  { name: "河南" },
  { name: "河北" },
  { name: "陕西" },
  { name: "湖北" },
  { name: "山西" },
  { name: "内蒙古" },
  { name: "安徽" },
  { name: "浙江" },
  { name: "宁夏" },
  { name: "四川" },
  { name: "贵州" },
  { name: "广西" },
  { name: "辽宁" },
  { name: "重庆" },
  { name: "海南" },
];

onMounted(() => {
  let data = mockData.map((i) => {
    let cityPosition = getCityPositionByName(i.name).value;
    return {
      name: i.name,
      value: cityPosition.concat(i.value),
    };
  });

  let initMap = echarts.init(document.querySelector("#mapDom"));
  initMap.setOption({
    backgroundColor: "transparent", // 设置背景色透明
    // 必须设置
    tooltip: {
      // show: false,
      show: true,
      trigger: 'item'
    },
    // 地图阴影配置
    geo: {
      map: "china",
      // 这里必须定义，不然后面series里面不生效
      tooltip: {
        show: false,
      },
      label: {
        show: false,
      },
      zoom: 1.21,
      silent: true, // 不响应鼠标时间
      show: true,
      roam: false, // 地图缩放和平移
      aspectScale: 0.75, // scale 地图的长宽比
      itemStyle: {
        borderColor: "#49cae5",
        borderWidth: 3,
        areaColor: "#070f71",
        shadowColor: "rgba(1,34,73,0.48)",
        shadowBlur: 10,
        shadowOffsetX: -10,
        shadowOffsetY: 10,
      },
      select: {
        disabled: true,
      },
      emphasis: {
        disabled: true,
        areaColor: "#00F1FF",
      },
      // 地图区域的多边形 图形样式 阴影效果
      // z值小的图形会被z值大的图形覆盖
      top: "10%",
      left: "center",
      regions: [
            {
                name: '南海诸岛',
                itemStyle: {
                    normal: {
                        areaColor: '#00000000', // 设置区域颜色为透明
                        borderColor: '#00000000' // 设置边框颜色为透明
                    },
                    emphasis: {
                        areaColor: '#00000000', // 设置高亮时的区域颜色为透明
                        borderColor: '#00000000' // 设置高亮时的边框颜色为透明
                    }
                }
            }
        ],
      z: 1,
    },
    series: [
      // 地图配置
      {
        type: "map",
        map: "china",
        coordinateSystem: 'geo',
        zoom: 1.2,
        tooltip: {
          show: false,
        },
        label: {
          show: true, // 显示省份名称
          color: "#ffffff",
          align: "center",
        },
        top: "10%",
        left: "center",
        aspectScale: 0.75,
        roam: false, // 地图缩放和平移
        itemStyle: {
          borderColor: "#56a9d5", // 省分界线颜色  阴影效果的
          borderWidth: 1,
          areaColor: "#063b6f",
          opacity: 1,
        },
        // 去除选中状态
        select: {
          disabled: true,
        },
        // 控制鼠标悬浮上去的效果
        emphasis: {
          // 聚焦后颜色
          disabled: false, // 开启高亮
          label: {
            align: "center",
            color: "#ffffff",
          },
          itemStyle: {
            color: "#ffffff",
            areaColor: "#0075f4", // 阴影效果 鼠标移动上去的颜色
          },
        },
        z: 2,
        data: data,
      },
      {
        type: "scatter",
        coordinateSystem: "geo",
        symbol: "pin",
        symbolSize: [10, 10],
        itemStyle: {
          color: "#e30707",
        },
        z: 2,
        data: data.map((item) => ({
          name: item.name, // 只保留 name 部分
          value: item.value, // 如果不需要 value，可以删除这一行
        })),
      },
    ],
  });
  //监听窗口变化
  window.addEventListener("resize", function () {
    console.log("监听窗口变化");
    initMap.resize();
  });
  // 添加点击事件监听器
  initMap.on("click", function (params) {
    // 处理点击事件
    console.log(params);
    window.location.href = '/curve'
  });
});
</script>

<style scoped>
.middle_box {
  width: 48vw;
  height: 85vh;
  /* background: pink; */
  margin-top: 2vh;
  margin-left: 1vw;
  /* position: relative; */
}

.map {
  width: 100%;
  height: 65vh;
  /* position: absolute; */
}

.date {
  width: 100%;
  height: 20vh;
}

.TimeDisplay {
  width: 100%;
  height: 7vh;
  border: none;
  text-align: center;
  font-size: 32px;
  font-weight: bold;
  border-top: 2px solid;
  border-image: linear-gradient(
      to right,
      transparent 20%,
      #00b7de 20%,
      #00b7de 80%,
      transparent 80%
    )
    1 / auto 2px stretch;
}

.Quantity {
  width: 100%;
  height: 12vh;
  /* margin-top: 3px; */
}
</style>
